<template>
  <div class="it-space" :style="styles">
    <slot></slot>
  </div>
</template>

<script name="ItSpace" setup>
import { ref, computed } from 'vue'
const props = defineProps({
  inline: {
    type: Boolean,
    default: true,
  },
  size: {
    type: Array,
    default: () => [10, 10],
  },
  alignItems: {
    type: String,
    default: 'center',
  },
})
const align = ref(props.inline ? props.alignItems : 'left')
const styles = computed(() => {
  return {
    display: props.inline ? 'inline-flex' : 'flex',
    gap:
      props.size.length == 2
        ? `${props.size[0]}px ${props.size[1]}px`
        : `${props.size[0]}px`,
    'flex-direction': props.inline ? 'inherit' : 'column',
    'align-items': align.value,
    'flex-wrap': 'wrap',
    margin: `${props.size[0] / 2}px 0px`,
    width: props.inline ? '100%' : 'fit-content',
  }
})
</script>
<style scoped>
.it-space {
}
</style>
